<template>
  <Dialog :title="t('ustcstudent.view.title')" v-model="dialogVisible" width="1400">
    <div class="mb-8px flex flex-items-center" v-hasPermi="['core:ustc-student:update']">
      <template v-if="!edit">
        <el-button type="primary" plain @click="handleEdit" :disabled="formLoading">
          <Icon icon="ep:edit" />
          {{ t('ustcstudent.view.clickEdit') }}
        </el-button>
      </template>
      <template v-else>
        <el-button type="success" plain @click="handleSave" :disabled="formLoading">
          <Icon icon="ep:check" />
          {{ t('ustcstudent.view.clickSave') }}
        </el-button>
        <el-button type="warning" plain @click="handleCancel" :disabled="formLoading">
          <Icon icon="ep:close" />
          {{ t('ustcstudent.view.clickCancel') }}
        </el-button>
        <div class="ml-[12px] flex-grow">
          <el-alert :title="t('ustcstudent.view.tips')" type="warning" show-icon />
        </div>
      </template>
    </div>
    <el-tabs v-model="activeName" tab-position="top">
      <el-tab-pane :label="t('ustcstudent.view.tab.basic')" name="basic">
        <TabItemBasic v-if="studentInfo" v-model="studentInfo.basic" />
      </el-tab-pane>
      <el-tab-pane :label="t('ustcstudent.view.tab.university')" name="university">
        <TabItemUniversity v-if="studentInfo" v-model="studentInfo.university" />
      </el-tab-pane>
      <el-tab-pane :label="t('ustcstudent.view.tab.admission')" name="admission">
        <TabItemAdmission v-if="studentInfo" v-model="studentInfo.admission" />
      </el-tab-pane>
      <el-tab-pane :label="t('ustcstudent.view.tab.degree')" name="degree">
        <TabItemDegree v-if="studentInfo" v-model="studentInfo.degree" />
      </el-tab-pane>
      <el-tab-pane :label="t('ustcstudent.view.tab.personal')" name="personal">
        <TabItemPersonal v-if="studentInfo" v-model="studentInfo.personal" />
      </el-tab-pane>
      <el-tab-pane :label="t('ustcstudent.view.tab.work')" name="work">
        <TabItemExp v-if="studentInfo" v-model="studentInfo.work" />
      </el-tab-pane>
    </el-tabs>
    <el-skeleton v-if="formLoading" :rows="5" animated />
    <Dialog :title="t('ustcstudent.view.confirmTitle')" v-model="dialogVisibleConfirm" width="1200">
      <UstcStudentInfoDiffView
        ref="diffViewRef"
        v-if="studentInfo && studentInfoBackup"
        :student-info="studentInfo"
        :student-info-backup="studentInfoBackup"
      />
      <el-input
        class="mt-[20px]"
        v-model="modifyComment"
        maxlength="300"
        :placeholder="t('ustcstudent.view.modifyPlaceholder')"
        show-word-limit
        type="textarea"
      />
      <template #footer>
        <el-button @click="submitVerify" type="primary" :disabled="verifyLoading"
          >{{ t('common.ok') }}
        </el-button>
        <el-button @click="dialogVisibleConfirm = false">{{ t('common.cancel') }}</el-button>
      </template>
    </Dialog>
  </Dialog>
</template>

<script setup lang="ts">
import TabItemBasic from './TabItemBasic.vue'
import TabItemUniversity from './TabItemUniversity.vue'
import TabItemAdmission from './TabItemAdmission.vue'
import TabItemDegree from './TabItemDegree.vue'
import TabItemPersonal from './TabItemPersonal.vue'
import TabItemExp from './TabItemExp.vue'
import { UstcStudentInfoView } from '@/types/ustcstudent'
import { UstcStudentApi } from '@/api/core/ustcstudent'
import _ from 'lodash-es'
import { UstcStudentInfoVerifyApi, UstcStudentInfoVerifyVO } from '@/api/core/ustcstudentinfoverify'
import UstcStudentInfoDiffView from './UstcStudentInfoDiffView.vue'
import { compareAndFilter } from '@/utils'

const { t } = useI18n()

const activeName = ref('basic')

// 修改弹窗备注
const modifyComment = ref('')

const dialogVisible = ref(false)
const dialogVisibleConfirm = ref(false)
const formLoading = ref(false)
const verifyLoading = ref(false)
const edit = ref(false)

const message = useMessage()

provide('editMode', edit)

const studentInfo = ref<UstcStudentInfoView>()
const studentInfoBackup = ref<UstcStudentInfoView>()

const emits = defineEmits(['refresh'])

const getData = async (account: number) => {
  studentInfo.value = await UstcStudentApi.getUstcStudentInfoViewByAccount(account)
  studentInfoBackup.value = _.cloneDeep(studentInfo.value)
}

/** 打开弹窗 */
const open = async (id: number) => {
  activeName.value = 'basic'
  edit.value = false
  studentInfo.value = undefined
  dialogVisible.value = true
  dialogVisibleConfirm.value = false

  // 修改时，设置数据
  formLoading.value = true
  try {
    await getData(id)
  } finally {
    formLoading.value = false
  }
}

const handleEdit = () => {
  edit.value = true
}

const handleSave = () => {
  const newValue = compareAndFilter(studentInfo.value, studentInfoBackup.value)
  // 判断变动是否为{}
  if (_.isEmpty(newValue)) {
    // 没改动 走取消逻辑
    handleCancel()
    return
  }

  modifyComment.value = ''
  // 显示确认弹窗
  dialogVisibleConfirm.value = true
}

const handleCancel = () => {
  edit.value = false
  // 还原可能的更改
  studentInfo.value = _.cloneDeep(studentInfoBackup.value)
}

const diffViewRef = ref<InstanceType<typeof UstcStudentInfoDiffView>>()
const submitVerify = async () => {
  verifyLoading.value = true
  const data: Partial<UstcStudentInfoVerifyVO> = {
    accountId: studentInfoBackup.value?.basic.accountId,
    studentCode: studentInfoBackup.value?.basic.studentCode,
    studentName: studentInfoBackup.value?.basic.studentName,
    studentGrade: studentInfoBackup.value?.university.grade,
    studentMajor: studentInfoBackup.value?.university.major,
    studentCampus: studentInfoBackup.value?.university.faculty,
    verifyType: '管理员修改',
    verifyStatus: '待审核',
    modifyFields: diffViewRef.value?.getModifyField() ?? '',
    oldValue: JSON.stringify(studentInfoBackup.value),
    newValue: JSON.stringify(studentInfo.value),
    remark: modifyComment.value
  }
  try {
    await UstcStudentInfoVerifyApi.adminModifyUstcStudent(data)
    dialogVisibleConfirm.value = false
    dialogVisible.value = false
    // 刷新列表
    emits('refresh')
    message.success(t('common.updateSuccess'))
  } finally {
    verifyLoading.value = false
  }
}

defineExpose({ open })
</script>

<style scoped lang="scss"></style>
